<template>
	<view class="classify">
		<view class="content">
			<view class="">
				<view class="" v-for="(i, inx) in ShoppingClassList" :key="i.id">
					<image :src="i.pic" class="bg-class" mode="aspectFill"></image>
					<view class="bgshred bgshred-one" @click="goList(i.id, i.cate_name)" v-if="inx == 0">
						<view class="minwidth">food</view>
						<view class="minwidth">{{ i.cate_name }}</view>
					</view>
					<view class="bgshred bgshred-tow" @click="goList(i.id, i.cate_name)" v-if="inx == 1">
						<view class="minwidth">food</view>
						<view class="minwidth">{{ i.cate_name }}</view>
					</view>
					<view class="bgshred" @click="goList(i.id, i.cate_name)" v-if="inx >= 2">
						<view class="minwidth">food</view>
						<view class="minwidth">{{ i.cate_name }}</view>
					</view>

					<view class="pic" @click="goList(i.id, i.cate_name)">
						<image src="https://www.szzn.group/uploads/20221118/bbff2485897991c33dfc4af4d3f8e093.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<tabbar @selectTabbar="selectTabbar" ref="tabbar"></tabbar>
	</view>
</template>

<script>
import tabbar from '@/components/tabBar/tabBar.vue';
import { classGtShoppingClass } from '@/api/api.js';
export default {
	components: {
		tabbar
	},

	data() {
		return {
			ShoppingClassList: [],
			image: 'https://www.720yun.com/t/95vkOw17s29?scene_id=54744210',
			webviewStyles: {
				progress: {
					color: '#ff3333'
				}
			},
			src: ''
		};
	},
	// 分享
	onShareAppMessage() {
		return {
			title: '优栽园',
			path: 'pages/classify/index/index'
		};
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: '优栽园',
			path: 'pages/classify/index/index'
		};
	},
	onShow() {
		this.$refs.tabbar.current = 2;
		this.classGtShoppingClass();
	},
	onLoad() {
		uni.showLoading({})
		this.classGtShoppingClass();
	},
	methods: {
		// 获取商品分类
		classGtShoppingClass() {
			let data = `group_id=${3}`;
			classGtShoppingClass(data).then(res => {
				if (res.data.code == '200') {
					uni.hideLoading()
					this.ShoppingClassList = res.data.data;
				} else {
					uni.hideLoading()
				}
			});
		},
		// 去分类
		goList(id, name) {
			uni.navigateTo({
				url: `/page_class/classlist/classlist?id=${id}&name=${name}`
			});
		},
		// 切换tabbar
		selectTabbar(e) {
			uni.switchTab({
				url: e.pagePath
			});
		}
	}
};
</script>

<style lang="scss">
.classify {
	padding: 20rpx;
}
.content {
	> view:nth-child(1) {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		view {
			width: 350rpx;
			position: relative;
			image {
				width: 100%;
				height: 200rpx;
			}
			.bgshred {
				width: 200rpx;
				position: absolute;
				top: 28%;
				left: 20%;
				background-color: rgba(0, 0, 0, 0.5);
				padding: 10rpx;
				color: #fff;
				z-index: 100;
			}
			.bgshred-one {
				background-color: rgba(225, 118, 94, 0.8) !important;
			}
			.bgshred-tow {
				background-color: rgba(143, 178, 117, 0.8) !important;
			}
			.pic {
				position: absolute;
				top: 80rpx;
				left: 240rpx;
				width: 60rpx;
				image {
					width: 50rpx;
					height: 50rpx;
				}
				z-index: 100;
			}
		}
	}
}
.minwidth {
	width: 160rpx !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 28rpx;
}
.bg-class {
	border-radius: 12rpx;
	box-shadow: 1px 1px 8px 1px #aaa;
	margin-bottom: 10rpx;
}
</style>
